<template>
   <div>
       <van-nav-bar
    class="van-nav-bar"
     left-text="返回"
     left-arrow
     @click-left="$router.back()"
  />
  <span class="set">设置</span>
     <div class="list">
        <div class="r1">
            <div>更换手机号码</div>
            <img src="../assets/2.png" alt="">
        </div>
        <div class="r2">
            <div>修改密码</div>
            <img src="../assets/2.png" alt="">
        </div>
        <div class="r6">
            <div>意见反馈</div>
            <img src="../assets/2.png" alt="">
        </div>
      </div>
      <button class="button" @click="signOut"  v-if="$store.state.phoneState">退出登录</button>
      <button class="button" @click="login" v-else>登录</button>
    </div>
</template>
<script>
export default {
  methods: {
    login() {
      this.$router.push(`/login`);
    },
    signOut() {
      this.$router.push(`/me`);
      this.$toast("已退出登录！");
      let honeHide = "";
      let phone = "";
      this.$store.commit("phoneValue", honeHide, phone);
    }
  }
};
</script>
<style scoped>
.list {
  box-sizing: border-box;
  padding: 5px 16px;
  color: #222831;
  font-weight: 700;
  font-size: 15px;
}
.set {
  font-size: 1.75rem;
  font-weight: 600;
  margin-left: 1.275rem;
}
.list {
  margin-top: 3.5rem;
}
.list div {
  display: flex;
}
.r1 {
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #edeff0;
}
.r1 div {
  width: 93%;
}
.r1 img {
  width: 8px;
}
.r2 {
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #edeff0;
}
.r2 div {
  width: 93%;
}
.r2 img {
  width: 8px;
}
.r6 {
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #edeff0;
}
.r6 div {
  width: 93%;
}
.r6 img {
  width: 8px;
  padding-right: 18px;
}
.button {
  margin-top: 8.5rem;
  width: 100%;
  height: 3.125rem;
  border-radius: 1.25rem;
  color: #ffffff;
  background-color: #1482ff;
  transition: 0.1s;
  border: none;
}
.button:active {
  background-color: #6da5e6;
  font-size: 0.8rem;
  transform: scale(0.9);
}
</style>

